<template>
  <el-col id="containerCopy">
    <div class="amapCopy">
      <!-- <el-amap vid="amapDemoCopy" id="amapDemoCopy" :zoom="12" class="amap-demo">
        <el-amap-marker></el-amap-marker>
      </el-amap> -->
      <el-amap vid="amapDemoCopy" id="amapDemoCopy" :center="mapCenter" :zoom="12" class="amap-demo">
        <el-amap-marker v-for="(marker,index) in markers" :key="index" :position="marker"></el-amap-marker>
      </el-amap>
      <div id="panel"></div>
    </div>
  </el-col>
</template>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=57358ac872e8f834962f8aa7072c7bfe&plugin=AMap.Autocomplete,AMap.PlaceSearch"></script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=57358ac872e8f834962f8aa7072c7bfe&plugin=AMap.Autocomplete"></script>
<script src="http://webapi.amap.com/maps?v=1.4.0&key=57358ac872e8f834962f8aa7072c7bfe&plugin=AMap.Geocoder"></script>

<script>
export default {
  props: {
    markers: {
      required: true
    },
    mapCenter: {
      required: true
    }
  },
  data() {
    return {
    }
  }
}
</script>

<style>
#amapDemoCopy {
  width: 100%;
  height: 500px;
}
#containerCopy {
  width: 100%;
  height: 500px;
}
.amapCopy {
  width: 100%;
  height: 500px;
}
#panel {
  position: absolute;
  background-color: white;
  max-height: 260px;
  overflow-y: auto;
  top: 8px;
  right: 10px;
  width: 280px;
  opacity: .9;
}
</style>